<template>
	<div class="popup">
		<van-popup class="list-popup" v-model="listVisible" position="bottom" get-container="body" :style="{ height: '60%' }" closeable>
			<van-list
				v-model="loading"
				:finished="finished"
				finished-text="没有更多了"
				:error.sync="error"
				@load="loadMore"
				loading-text="拼命加载中"
			>
				<!--渲染商品列表-->
				<div class="goods-list">
					<div class="goods-wrap" v-for="(goodsItem, goodsIndex) in goodsList" :key="'goods' + goodsIndex">
						<goods-item :item="goodsItem"></goods-item>
					</div>
				</div>
			</van-list>
		</van-popup>

		<van-popup class="empty-popup" v-model="emptyVisible" get-container="body" :style="{ height: '24%' }">
			<p>
				你复制的商品标题暂无优惠商品<br />
				建议您换个商品试试哦！
			</p>
			<a @click="emptyVisible = false">知道了</a>
		</van-popup>
	</div>
</template>

<script>
import { GoodsItem } from '../../../components';
import { Popup, List } from 'vant';
export default {
	name: 'AiSearch',
	components: {
		'van-popup': Popup,
		'van-list': List,
		GoodsItem
	},
	data() {
		return {
			emptyVisible: false,
			listVisible: false,
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			error: false, // 控制是否为空数据
			goodsList: [],
			params: {
				page: 1,
				size: 20,
				keyWord: ''
			}
		};
	},
	methods: {
		search(keyWord) {
			this.params.keyWord = keyWord;
			this.loadMore();
		},
		// 追加数据
		loadMore() {
			this.$service.shopping.goods.page(this.params).then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				if (res.pagination.total === 0) {
					this.emptyVisible = true;
				} else {
					// 加载状态结束
					this.loading = false;
					this.params.page += 1;
					this.listVisible = true;

					// 数据全部加载完成
					if (this.goodsList.length === 0) {
						this.params.page = 1;
						this.error = true;
					} else if (this.goodsList.length >= res.pagination.total) {
						this.finished = true;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list-popup {
	border-radius: 40px 40px 0 0;
	background: #fff url('../../../assets/images/index/ai-search.png') no-repeat top;
	background-size: 100%;
	padding: 120px 14px 14px;
	/deep/.van-popup__close-icon {
		color: $color-white;
	}
	.van-list {
		height: 100%;
		overflow: auto;
		.goods-list {
			.goods-wrap {
				padding: 16px;
				border-bottom: 2px dotted #e2e2e2;
				margin-bottom: 16px;
			}
		}
	}
}
.empty-popup {
	border-radius: 40px;
	width: 550px;
	height: 194px;
	background: #fff url('../../../assets/images/index/sorry.png') no-repeat top;
	background-size: 100%;
	padding-top: 110px;
	p {
		font-size: 30px;
		color: #272221;
		line-height: 48px;
		text-align: center;
	}
	a {
		width: 180px;
		line-height: 52px;
		text-align: center;
		margin: 30px auto 0;
		background: #fe6a5c;
		display: block;
		border-radius: 50px;
		color: $color-white;
		font-size: 28px;
		box-shadow: 0px 6px 12px rgba(247, 1, 20, 0.3);
	}
}
</style>
